﻿<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">


<style>
.biji{
  margin:10px;
  border:1px solid #ccc;
  border-radius:3px;
  padding:5px;
  position:relative;
  padding-top:15px;
}
.biji span{
  position:absolute;
  right:3px;
  top:3px;
  font-size:12px;
  color:#666;
}
.biji .createDate{
  font-size:12px;
  margin-top:10px;
  color:#666;
}
</style>

<button id="bakbtn">备份</button>
<button id="impbtn">导入</button>
<span id="shaohou" style="display:none">请稍后...</span>

<div id="d1">
  <h2>备忘录</h2>
  <hr />
  <div style="font-size:30px;" id="addbtn">+</div>
  <div id="bijiList"></div>
</div>

<div id="d2" style="display:none">
  <h2 id="returnbtn">返回 新增备忘录</h2>
  <hr />
  <div id="cntDiv" contentEditable style="padding:5px;height:300px;overflow:auto;border:1px solid red"></div>
</div>

<script>
var bijis = [];
loadData();

function loadData(){
  if(localStorage.bijis){
    bijis = JSON.parse(localStorage.bijis);
  }

  bijiList.innerHTML = "";

  for(var i=bijis.length-1;i>=0;i--){
    var b = bijis[i];
    var newDiv = document.createElement("div");
    newDiv.className = "biji";
    var deleteSpan = document.createElement("span");
    deleteSpan.innerHTML = "删除";
    var titleDiv = document.createElement("div");
    titleDiv.className = "title";
    titleDiv.innerHTML = b.content;
    var createDateDiv = document.createElement("div");
    createDateDiv.className = "createDate";
    createDateDiv.innerHTML = b.createDate;

    newDiv.appendChild(deleteSpan);
    newDiv.appendChild(titleDiv);
    newDiv.appendChild(createDateDiv);
   
    bijiList.appendChild(newDiv);
  }
}

impbtn.onclick = function(){
  var uploadInput = document.createElement("input");
  document.body.appendChild(uploadInput);
  uploadInput.type = "file";
  uploadInput.style.display = "none";
  uploadInput.click();
  uploadInput.onchange = function(){
    var f = uploadInput.files[0];
    var filereader = new FileReader();
    filereader.readAsText(f);
    shaohou.style.display = "block";
    

    filereader.onload = function(){

setTimeout(function(){
      shaohou.style.display = "none";
      var bijis = JSON.parse(filereader.result);
      localStorage.bijis = filereader.result;
      loadData();
 },3000);

    };

   
  }
};

bakbtn.onclick = function(){
  var blob = new Blob([JSON.stringify(bijis)],{"type":"application/json"});
  var url = URL.createObjectURL(blob);
  console.log(url);
  var aEle = document.createElement("a");
  aEle.download = "备份.biji";
  aEle.href = url;
  document.body.appendChild(aEle);
  aEle.click();
  document.body.removeChild(aEle);
};

addbtn.onclick = function(){
  d1.style.display = "none";
  d2.style.display = "block";
  cntDiv.focus();//获得光标
};

returnbtn.onclick = function(){
  d1.style.display = "block";
  d2.style.display = "none";

  if(cntDiv.innerHTML.length>0){
    var biji = {
      content:cntDiv.innerHTML,
      createDate:(new Date()).toLocaleString()
    };
    bijis.push(biji);
    localStorage.bijis = JSON.stringify(bijis);
    cntDiv.innerHTML = "";
    loadData();
  }
};
</script>










